<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <!-- import CSS -->
  <link rel="stylesheet" href="../js/3rd/elementUi/index.css">
  <link rel="stylesheet" href="../css/pc.css">
  <script src="../js/3rd/elementUi/vue.js"></script>
  <script src="../js/3rd/jquery-3.1.1.min.js"></script>
</head>
<body>
  <div id="crowdFundingProject" class="admin" style="display:none">
    
	<el-container>
	  <el-aside class="sider-bar" id="siderbar">
      <div class="logo"><img src="../image/logo.jpg">来赚吧管理后台</div> 
	    <tp-siderbar title="发布众筹"></tp-siderbar>
	  </el-aside>
	  <div class="right-content">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="bread-bd">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>发布创业</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="l-bd"> 
        <el-button type="primary" size="small" @click="submitProject">确认发布</el-button>
      </div>
      <div class="left-b" style="width:100%">  		 
        <div class="input-group">
            <div class="title">*图片上传：</div> 
            <el-upload
              action="http://upload.qiniup.com"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"            
              :before-upload="beforeAvatarUpload"
              :data="qiniuData">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </div>


  		  <div class="input-group">
  	        <div class="title">*众筹名称：</div>
  	        <div class="input">
  	        	<el-input  placeholder="请输入内容" v-model="crowdFundingProject.name"></el-input>
  	        </div>			
  			<div class="clearfix"></div>
  		  </div>
  	    
        <div class="input-group">
            <div class="title">*达标人数：</div>
            <div class="input">

              <el-input  placeholder="达标人数" type="number" v-model="crowdFundingProject.number"></el-input>
            </div>      
        <div class="clearfix"></div>
        </div>  

        <div class="input-group">
            <div class="title">*项目价格：</div>
            <div class="input">
              <el-input  placeholder="达标人数" type="number" v-model="crowdFundingProject.price"></el-input>
            </div>      
        <div class="clearfix"></div>
        </div>  

        <div class="input-group">
            <div class="title">*项目内容：</div>
            <div class="input">           
                <el-input type="textarea" v-model="crowdFundingProject.content"></el-input>
            
            </div>      
        <div class="clearfix"></div>
        </div> 
        

        
      </div>  

	</el-container>



  </div>
</body>


  <!-- import JavaScript -->
  <script src="../js/3rd/elementUi/index.js"></script>
  <script src="../js/js/admin_siderbar.js"></script>
  <script src="../js/js/common.js"></script>
  <script>
   var token=getCookie("userToken");
   var userId=getCookie("userId");
   if(!token||!userId){
      window.location.href = "/admin/login.html";
   }

   var crowdFundingProject={

                      client: 3,
                      images: "www.baidu.com",
                      name: "",
                      number: 0,
                      price: 0,
                      sort: 0,                   
                      token: "",
                      userId: null,
                      content:''
                    }
    new Vue({
      el: '#crowdFundingProject',
      data: {
        crowdFundingProject:crowdFundingProject,
        isSubmitProject:false,
        dialogVisible:false,
        dialogImageUrl:'',
        imageUrlData:[],
        qiniuData: {
          key: "",
          token: ""
        },
        upload_qiniu_addr:'',
        imageIsAlreadyExist:false
      },
      created:function(){
          this.crowdFundingProject.token=token;
          this.crowdFundingProject.userId=parseInt(userId);
          var data={
            client: 3,
            token: token,
            userId: userId
          }
          pushData("/qiniu/get_token ",data,function(res){
            if(res.errorCode=="008"){
               window.location.href = "/admin/login.html";
             }
            if(res.state){
              this.qiniuData.token=res.data.result;
            }else{
              alert(res.message)
            } 
          }.bind(this));
          pushData("/qiniu/get_image_rul",data,function(res){
            if(res.state){
              this.upload_qiniu_addr=res.data.url;
            }else{
              alert(res.message)
            } 
          }.bind(this));

          $("#crowdFundingProject").show();
      },
      methods:{
        submitProject:function(){
          if(this.isSubmitProject){
            return;
          }
          
          this.isSubmitProject=true;
          var url="/crowdfunding/save";
          this.crowdFundingProject.images=this.imageUrlData.join(",");
          var data=this.crowdFundingProject;
          pushData(url,data,function(res){
                this.isSubmitProject=false;
                if(res.state){
                  alert("发布成功")
                }else if(res.errorCode==008){
                	window.location.href = "/admin/login.html";
                }
                else{
                  alert(res.message)
                }
          }.bind(this))
        },
        beforeAvatarUpload: function(file) {
              this.qiniuData.key = new Date().getTime()+file.name; 
              this.imageIsAlreadyExist=false;
              this.imageUrlData.forEach(function(imageUrl,index){
                if(imageUrl.indexOf(file.name)>-1){                
                  this.imageIsAlreadyExist=true;
                }
              }.bind(this))   
              if(this.imageIsAlreadyExist){
                this.$message.error('图片已经存在!');
                return false
              }       

        },
  
        handleRemove(file, fileList) {
          this.imageUrlData.forEach(function(imageUrl,index){
            if(imageUrl.indexOf(file.name)>-1){
               this.imageUrlData.splice(index,1)
            }
          }.bind(this))
        },
        handleSuccess(res, file) {
          this.imageUrlData.push(this.upload_qiniu_addr +"/"+ res.key);
          console.log(this.upload_qiniu_addr +"/"+ res.key)
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        }

      }
      
    })
  </script>
</html>